<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <title>Panel</title>
  <style>
   
  </style>
</head>
<body>
  <div id="app" class="container">
    <div class="row">
      <div class="col-sm-8 col-md-6 col-lg-4 col-sm-offset-2 col-md-offset-3 col-lg-offset-4">
        <panel :type="theme" @say-song="saySong">
          <h3 ref="title" slot="title">我们不一样</h3>
          <div slot="content">
            <p>我们不一样</p>
            <p>每个人都有不同的境遇</p>
            <p>我们不一样</p>
            <p>每个人都有不同的境遇</p>
            <p>我们不一样</p>
            <p>每个人都有不同的境遇</p>
            <p>我们不一样</p>
            <p>每个人都有不同的境遇</p>
          </div>
          <div slot="author">
            <p>词曲：高进</p>
            <p>演唱：大壮</p>
          </div>
        </panel>
      </div>
    </div>
  </div>
  <template id="panel">
    <div :class="['panel', 'panel-' + type]">
      <div class="panel-heading">
        <slot name="title"></slot>
      </div>
      <div :class="['panel-body','text-' + type]">
        <slot name="content"></slot>
      </div>
      <div class="panel-footer">
        <slot name="author">
          <p>匿名</p>
        </slot>
        <button @click="say" :class="['btn', 'btn-' + type]">点击弹出歌名</button>
      </div>
    </div>
  </template>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
  <script>
    let panel = {
      template: '#panel',
      props:{
        type:{
          type:String,
          default: 'default'
        }
      },
      methods:{
        say(){
          this.$emit('say-song')
        }
      }
    }
    let vm = new Vue({
      el: '#app',
      data: {
        theme:'danger'
      },
      components:{
        panel
      },
      methods: {
        saySong(){
          alert(this.$refs.title.innerText)
          this.theme = this.theme == 'danger' ? 'primary' : 'danger'
        }
      }
    
    })

    
    /**
      wogankan diyiji juede zhege dianshiju youdian yisi a 
      wo gang kaishi rangwo xiangqi lingyibu hanju jichengzhemen 
      yeshi xiaoyuan yeshi guizuxuexiao ,houlai caifaxian zheshi 
      manhua shijie he manhua renwu 
      
      端午只是一个漫画
      woxiang zhidao nage tushuguan kanbujian lian de nage nande shibushi manhua de zuozhe
      haishi nage chaoyouyu shi ganshenmede 
      sheizhi zhege manhuade zhujiao
      
    */

  </script>
</body>
</html>